<script setup lang="ts">
import { ref } from "vue";

const modalVisible = ref(false);

defineExpose({
  show() {
    modalVisible.value = true;
  },
});
</script>

<template>
  <umi-modal v-model:visible="modalVisible" :width="800" title="选择商品">
    <umi-space direction="vertical" :size="16" style="width: 100%">
      <umi-row :gutter="16">
        <umi-col flex="400px">
          <umi-form-item label="商品名称/ID">
            <umi-input placeholder="请输入商品名称/ID"></umi-input>
          </umi-form-item>
        </umi-col>
        <umi-col flex="130px">
          <umi-space :size="10" style="margin-top: 2px">
            <umi-button type="primary">搜索</umi-button>
            <umi-button type="primary">重置</umi-button>
          </umi-space>
        </umi-col>
      </umi-row>
      <umi-table :data="[1, 2, 3]" :pagination="false" :row-selection="{ type: 'checkbox' }">
        <template #columns>
          <umi-table-column title="商品名称/ID" slot-name="products"></umi-table-column>
          <umi-table-column title="商品价格(元)" slot-name="price" :width="150"></umi-table-column>
          <umi-table-column title="商品库存" slot-name="stock" :width="150"></umi-table-column>
        </template>
        <template #products>
          <umi-space :size="10" align="center">
            <umrp-image :width="50" :height="50"></umrp-image>
            <umi-space direction="vertical" :size="10">
              <umi-text>0基础入门体验课</umi-text>
              <umi-space :size="4">
                <umrp-text>ID: 202509010001</umrp-text>
                <umi-icon name="copy"></umi-icon>
              </umi-space>
            </umi-space>
          </umi-space>
        </template>
        <template #price>
          <umi-text>168.00</umi-text>
        </template>
        <template #stock>
          <umi-text>1000</umi-text>
        </template>
      </umi-table>
    </umi-space>
  </umi-modal>
</template>
